<style scoped>
.expand-row {
  margin-bottom: 16px;
}
.no-btn {
  color: #ed3f14;
  border: 1px solid #ed3f14;
  border-radius: 2px;
  padding: 3px 2px;
}
.yes-btn {
  color: #19be6b;
  border: 1px solid #19be6b;
  border-radius: 2px;
  padding: 3px 2px;
  margin-left: 10px;
  margin-right: 10px;
}
.shenti-box {
  padding-top: 10px;
  font-size: 16px;
}
.shenti-box span {
  cursor: pointer;
  font-size: 14px;
}
.expand-key{
  padding-left: 40px;
}
.expand-key,
.expand-value {
  font-size: 14px;
 
}
</style>
<template>
    <div class="show-detail">
        <Spin fix  v-if="spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>后台处理中...</div>
        </Spin>
        <h2>{{row.id}}-题目:{{ row.title }}</h2>
        <Row>
            <Col span="24">
                <span class="expand-key">A: </span>
                <span class="expand-value">{{ row.a }}</span>
            </Col>
            <Col span="24">
                <span class="expand-key">B: </span>
                <span class="expand-value">{{ row.b }}</span>
            </Col>
            <Col span="24">
                <span class="expand-key">C: </span>
                <span class="expand-value">{{ row.c }}</span>
            </Col>
            <Col span="24">
                <span class="expand-key">D: </span>
                <span class="expand-value">{{ row.d }}</span>
            </Col>
        </Row>
        <Row>
            <Col span="6">
                <span class="expand-key">正确答案: </span>
                <span class="expand-value">{{ row.answer }}</span>
            </Col>
            <Col span="6" class="shenti-box">
                审题:
                <span class="yes-btn" @click="okStateHandler(1)">正确<Icon type="checkmark-round"></Icon></span>
                <span class="no-btn" @click="okStateHandler(2)">错题 <Icon type="close-round"></Icon></span>
            </Col>
            <Col span="12">
                标记：
                <Button type="ghost" shape="circle">收藏</Button>
                <Button type="ghost" shape="circle">高频</Button>
                <Button type="ghost" shape="circle">置顶</Button>
            </Col>
        </Row>
    </div>
</template>
<script>
import API from '../../api/api_kaoti.js';
export default {
  props: {
    index:Number,
    row: Object,
    updateOk:Function
  },
  created () {
      console.log(this.row,9999);
  },
  data () {
      return {
          spinShow:false
      }
  },
  methods: {
      okStateHandler(type){
        let params = {
            isok: type
        }
        this.row.isok = type;
        // this.spinShow = true;
        API.updateOk(this.row.id, params).then((res)=>{
            this.$Notice.success({
                title: res.msg,
                desc:  '',
                duration: 3.5
            });
            // this.spinShow = false;
            this.updateOk(this.row,this.index);
            
        })
        
      }
  }
};
</script>
